import SideBar from '../../component/SideBar'
import HeaderNav from '../../component/HeaderNav'
import BreadcrumbNav from '../../component/BreadcrumbNav'
import LogoCpn from '../../component/SideBar/Logo'

import React from 'react'
import { Outlet } from 'react-router-dom'

import { Layout, theme } from 'antd'

const { Header, Content, Footer, Sider } = Layout

const App: React.FC = () => {
  // const [collapsed, setCollapsed] = useState(false)
  const {
    token: { colorBgContainer }
  } = theme.useToken()

  const siderStyle: React.CSSProperties = {
    overflow: 'auto',
    height: '100vh',
    position: 'sticky',
    insetInlineStart: 0,
    top: 0,
    bottom: 0,
    scrollbarWidth: 'thin',
    scrollbarGutter: 'stable',
    scrollbarColor: 'yellow'
  }
  const headerStyle = {
    padding: '0 10px',
    background: colorBgContainer,
    height: '50px',
    lineHeight: '50px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center'
  }

  return (
    <Layout hasSider style={{ minHeight: '100vh' }}>
      <Sider style={siderStyle}>
        <LogoCpn />
        <SideBar />
      </Sider>
      <Layout>
        <Header style={headerStyle}>
          <BreadcrumbNav />
          <HeaderNav />
        </Header>
        <Content style={{ margin: '10px' }}>
          <Outlet />
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  )
}

export default App
